<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Youho | 个人博客</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Youho的个人博客，分享和记录前端学习。">
  <meta name="author" content="Youho">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
	<link rel="icon" href="media/logo.jpg" type="image/jpg">
	<link rel="bookmark" href="media/logo.jpg" />
  <!-- 时刻关注docsify版本更新情况 https://github.com/docsifyjs/docsify -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css" />
  

	<style>
    :root{
      --card-start: rgba( 0, 6, 40, .5 );
      --card-end: rgba(32, 4, 12, .7);
      /* --strongfont: #ef96b9; */
      --strongfont: #e40c70;
      --fontcolor-card: #bbcaf4;
      /* --fontcolor-tip: #b61f56; */
      --fontcolor-tip: #e3899d;
      /* --themecolor: #fe5e99; */
      --linkcolor-deep: #908090;
      --blinkcolor: yellowgreen;
      --emlink: yellow;
      --themecolor-alpha: rgba(254, 94, 153,.4);
      --themecolor-light: rgb(255 222 222 / 13%);
      --bordercolor-box: rgba( 255, 255, 255, 0.18);
      --shadowcolor-box: rgba( 31, 38, 135, 0.37);
      --shadowcolor-pic: #622344;
      --warnback: rgb(191 190 190 / .1);
      --bluecolor: #505ee9; 
      --tagcolor: #7430ff;
      --bodyback: #3f3f3f;
      --boxshadow: #eee;
      --maincolor-half: rgba(250, 250, 252, .5);
      --linecolor: #eee;
      --maincolor: #fbfbfc;
    }
    .dark{
      --bluecolor: #8e98f6;
      --strongfont: #ff719f;
      --maincolor: #121213;
      --maincolor-half: rgba(22, 22, 26, .5);
      --fontcolor: #c8c8c8;
      --fontcolor-tip: #ffa8c8;
      --fontback: #282828;
      --fontback-lighter: #141416;
      --fontback-deep: #181818;
      --btnback: rgba(63,63,63,.8);
      --boxshadow: #352a30;
      --linecolor: #555;
      color: #c8c8c8;
      background-color: #121212;
      
    }
    /* 滚动条设置 */
    .sidebar::-webkit-scrollbar{
      width: 0px;
    }
    code::-webkit-scrollbar{
      height: 12px;
      border-radius: 10px;
    }
    .dark code::-webkit-scrollbar{
      background-color: var(--fontback-deep);
    }
    code::-webkit-scrollbar-thumb{
      border-radius: 10px;
      background-color: var(--themecolor-light);
    }
    .dark code::-webkit-scrollbar-thumb {
      background: var(--fontback-lighter);
    }
    
    /* 一、侧边栏 */
    .sidebar{
      position: relative;
      border-right: 1px solid rgba(0,0,0,.1);
      background-color: var(--maincolor-half);
    }
    .dark .sidebar{
      color: var(--fontcolor);
    }
    body,
    .sidebar ul li a{
      font-size: 12px;
    }
    
    /* 搜索框 */
    .sidebar .search {
      z-index: 2;
      position: relative;
      top: 4px;
      padding: 6px 0;
      border: none;
    }
    .sidebar .search .input-wrap{
      display: block;
      position: relative;
    }
    .sidebar .search input{
      display: inline-block;
      padding: 0.6em 12px;
      background-color: transparent;
      border: none;
    }
    .sidebar .search input:focus{
      border: none;
    }
    .sidebar .search .clear-button.show{
      position: absolute;
      right: 6px;
      top: 2px;
      text-align: center;
    }
    .search .results-panel{
      position: absolute;
      left:0;
      top: 40px;
      padding: 10px;
      width: 100%;
      background-color: var(--maincolor);
    }
    .search .results-panel::after{
      display: block;
      content: "";
      z-index: -1;
      position: fixed;
      left: -300px;
      top:0;
      width: 300px;
      height: 100vh;
      background-color: var(--maincolor-half);
    }
    .search .results-panel.show::after{
      left: 0;
    }
    .search .results-panel h2 {
      font-size: 14px;
    }
    .search .results-panel p {
      font-size: 12px;
    }
    /* 分割线类 */
    .sidebar .search .matching-post{
      border-bottom-color: var(--linecolor);
    }
    .markdown-section hr{
      border-bottom-color: var(--linecolor);
    }
    .markdown-section td, .markdown-section th{
      border-color: var(--linecolor);
    }
    
    /* 头像区 - 含导航 */
    .sidebar .app-name::before{
      top: -22px;
    }
    h1.app-name{
      position: relative;
      margin: 0 auto 3.8rem;
    }
    .app-name::before{
      content: "";
      position: absolute;
      left: 0;
      top: -21px;
      width: 100%;
      height: 1px;
      background-color: var(--bodyback);
    }
    
    .logoSize,
    .app-name-link img{
    	width: 112px;
    	height: 112px;
      margin: 0;
    	border-radius: 50%;
    	border: 4px solid var(--theme-color);
    	transition: 0.8s;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .logoSize:hover,
    .app-name-link img:hover{
    	transform: scale(1.1);
    }
    
    .app-sub-sidebar li:before{
    	content: "";
    }
    .sidebar .contact{
      margin-top: 8px;
    }
    .contact span:hover{
      color: var(--theme-color);
    }
    .email{
      font-weight: 700;
      font-size: 14px;
      color: inherit;
      padding-bottom: 20px;
    }
    .smallnav{
      display: none;
      position: absolute;
      left: 0;
      bottom: -36px;
      width: 100%;
      height: 36px;
      background-color: var(--warnback);
      text-align: center;
      font-size: 13px;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .smallnav .item{
      flex: 1;
      height: 36px;
      line-height: 36px;
      border-top: 2px solid transparent;
    }
    .smallnav .item:hover{
      color: var(--theme-color);
    }
    .smallnav .item.active{
      color: var(--theme-color);
      border-top-color: var(--theme-color);
    }
    
    
    /* 二、左下角&右上角&右下角按钮 */
    
    .sidebar-toggle{
      width: unset;
      padding: 11px 10px 10px;
      left: 210px;
    }
    .darkbtn{
      z-index: 30;
      position: fixed;
      left: 252px;
      padding: 1px 2px 0 8px;
      color: var(--theme-color);
      cursor: pointer;
      background-color: hsla(0,0%,100%,.8);
    }
    .sidebar-toggle,
    .darkbtn{
      bottom: 4px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    .close .sidebar-toggle{
      left: 5px;
    }
    .close .darkbtn{
      left: 47px;
    }
    .dark .sidebar-toggle,
    .dark .darkbtn{
      background-color: var(--btnback);
    }
    
    .sidebar-toggle:hover,
    .darkbtn:hover{
      background-color: var(--maincolor-half);
    }
    .sidebar-toggle-button{
      display: grid;
      flex-direction: column;
      align-content: space-between;
      height: 15px;
    }
    .sidebar-toggle:hover .sidebar-toggle-button{
      opacity: 1;
    }
    .sidebar-toggle span{
      margin-bottom: unset;
      height: 3px;
      border-radius: 2px;
    }
    .app-nav a{
      font-size: 14px;
    	color: var(--linkcolor-deep);
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .github-corner svg{
      height: 52px;
      width: 52px;
      fill: var(--theme-color);
    }
    .dark .github-corner svg{
      color: var(--maincolor);
    }
    .totop{
      z-index: 100;
      position: fixed;
      right: 30px;
      bottom: 120px;
      text-align: center;
      line-height: 60px;
      width: 60px;
      height: 60px;
      color: white;
      font-size: 30px;
      cursor: pointer;
      background-color: var(--themecolor-alpha);
      border-radius: 50%;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .totop:hover{
      background-color: var(--theme-color);
    }
    .totop::before,
    .totop::after{
      display: block;
      content: "";
      position: absolute;
      left: 26px;
      top: 24px;
      width: 3px;
      height: 12px;
      border-radius: 0 0 2px 2px;
      background-color: #fff;
      transform: rotateZ(45deg);
    }
    .totop::after{
      left: 32px;
      top: 24px;
      transform: rotateZ(-45deg);
    }
    /* 三、文本调整 */
    .dark .anchor span,
    .dark .sidebar a{
      color: var(--fontcolor);
    }
    .dark .sidebar li.active>a{
      color: var(--theme-color);
    }
    .dark .markdown-section .tip,
    .dark .markdown-section code,
    .dark .markdown-section pre{
      background-color: var(--fontback);
    }
    .dark .markdown-section p.tip code{
      background-color: var(--fontback-lighter);
    }
    .dark input[type="search"]{
      color: var(--fontcolor);
      background-color: var(--fontback-lighter);
    }
    
    .markdown-section{
      max-width: 84%;
    }
    .markdown-section em{
      display: inline-block;
      box-sizing: border-box;
      padding: 0 8px;
      line-height: 18px;
      font-size: 12px;
      font-style: normal;
      color: #fff;
      background-color: var(--tagcolor);
      border-radius: 6px;
    }
    .markdown-section em.date{
      height: 18px;
      line-height: normal;
      color: var(--tagcolor);
      background-color: transparent;
      border: 1px solid var(--tagcolor);
    }
    .markdown-section em.new{
      background-color: #616161;
    }
    .markdown-section em a{
      color: var(--emlink);
    }
    b,  
    .markdown-section strong{
      color: var(--bluecolor);
      padding: 0 2px;
    }
    
    .markdown-section b{
      color: var(--strongfont);
      font-size: 1.2em;
    }
    /* .markdown-section table b{
      color: var(--bluecolor);
      padding: 0 2px;
      font-size: 1em;
    } */
    .markdown-section b.addcolor{
      color: var(--blinkcolor);
      font-size: 1.06em;
    }
    
    .markdown-section blockquote b{
      display: inline-block;
      margin-bottom: 8px;
      font-size: 1.06em;
    }
    .markdown-section .tip b{
      color: inherit;
      font-size: 1.03em;
    }
    .markdown-section .warn b{
      font-size: 1em;
    }
    .markdown-section h2{
      font-size: 1.4rem;
    }
    .markdown-section h3{
      font-size: 1.2rem;
    }
    .markdown-section tr:nth-child(2n){
      background-color: var(--warnback);
    }
    .markdown-section p.warn{
      padding: 1.2rem 1.6rem;
      border-radius: 6px;
      background-color: var(--warnback);
      box-shadow: 0 1px 0 0 var(--boxshadow);
    }
    .markdown-section p.tip{
      border-radius: 12px;
      box-shadow: 0 1px 0 0 var(--boxshadow);
    }
    
    .markdown-section pre{
      padding: 20px 1.4rem 0;
      border-radius: 6px;
      box-shadow: 0 1px 0 0 var(--boxshadow);
    }
    .markdown-section iframe{
      border: none;
    }
    .markdown-section code{
      background-color: #fcfcfc;
      word-wrap: break-word;
    }
    
    /* 链接及相关符号处理 */
    a{
      text-decoration: none;
    }
    .markdown-section a,
    b.addcolor a{
      display: inline-block;
      position: relative;
      margin-left: 4px;
      margin-right: 16px;
      font-weight: 400;
    }   
    b.addcolor a{
      color: var(--blinkcolor);
    }
    .markdown-section a::before,
    b.addcolor a::before{
      display: block;
      content: "";
      position: absolute;
      right: -9px;
      bottom: 5px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      border: 2px solid var(--bluecolor);
    }
    .markdown-section a::after,
    b.addcolor a::after{
      display: block;
      content: "";
      position: absolute;
      right: -9px;
      bottom: 3px;
      width: 2px;
      height: 3px;
      background-color: var(--bluecolor);
      transform: rotateZ(-36deg);
    }
    .markdown-section em a::after{
      background-color: var(--emlink);
    }
    .markdown-section em a::before{
      border-color: var(--emlink);
    }
    .markdown-section a.anchor::before,
    .markdown-section a.anchor::after,
    .markdown-section .footer a::before,
    .markdown-section .footer a::after{
      display: none;
    }
    .markdown-section .footer a{
      margin-left: unset;
      margin-right: unset;
    }
    .markdown-section blockquote{
      padding: 1px 20px;
      background-color: var(--themecolor-light);
    }
    .markdown-section blockquote p{
      font-weight: 400;
      color: var(--fontcolor-tip);
    }
    
    p img{
      margin-right: 10px;
      box-shadow: 1px 1px 4px 0px var(--shadowcolor-pic);
      transform: scale(.9);
    }
    table{
      font-size: 14px;
    }
    pre .docsify-copy-code-button{
      border-radius: 14px 6px 0 14px;
    }
    .footer span{
      display: block;
    }
		
    /* 四、封面 */
    section.cover h1{
      font-weight: 700;
      margin: 0 0 2.5rem;
    }
		section.cover.has-mask .mask{
			background-color: unset;
		}
		section.cover.show{
			display: flex;
			justify-content: center;
		}
		section.cover .cover-main>p:last-child a{
		  opacity: .9;
		}
    section.cover .cover-main>p:last-child a:hover,
    section.cover .cover-main>p:last-child a:last-child:hover{
		  color: #23101f;
      opacity: 1;
		}
    section.cover .cover-main>p:last-child a{
			background-color: #fff;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
		}
		section.cover .cover-main{
			padding: 30px 0px;
			max-width: 560px;
      color: var(--fontcolor-card);
			background: var(--card-start);
			box-shadow: 0 8px 32px 0 var(--shadowcolor-box);
			border-radius: 20px;
			border: 1px solid var(--bordercolor-box);
			-webkit-backdrop-filter: blur(2px);
			backdrop-filter: blur(2px);
		}
    section.cover .cover-main:hover{
      background: var(--card-end);
      transition: all 1s;
    }
    
	
    @media(max-width:991px)  {
      .totop{
        right: 8px;
      }
    }
    @media screen and (max-width: 768px){
      body.close .sidebar-toggle {
        width: unset;
      }
      body.dark .sidebar-toggle{
        background-color: var(--btnback);
      }
      body.close .darkbtn{
        transition: background-color 1s;
      }
      .ready .sidebar-toggle{
        left: 0;
      }
      .ready .darkbtn{
        left: 42px;
      }
    }
  </style>
  <style>
    @font-face {
      font-family: 'contact';
      src:  url('media/fonts/contact.eot?gjurww');
      src:  url('media/fonts/contact.eot?gjurww#iefix') format('embedded-opentype'),
        url('media/fonts/contact.ttf?gjurww') format('truetype'),
        url('media/fonts/contact.woff?gjurww') format('woff'),
        url('media/fonts/contact.svg?gjurww#contact') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
    
    [class^="icon-"], [class*=" icon-"] {
      margin-right: 6px;
      /* use !important to prevent issues with browser extensions that change fonts */
      font-family: 'contact' !important;
      speak: never;
      font-size: 15px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
    
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-sun:before {
      content: "\e9d4";
      text-align: center;
      line-height: 36px;
      font-size: 20px;
    }
    .active .icon-sun:before {
      content: "\e9d5";
    }
    /* .icon-contrast:before {
      content: "\e9d5";
    } */
    .icon-book:before {
      content: "\e91f";
    }
    .icon-bubble2:before {
      content: "\e96e";
    }
    .icon-terminal:before {
      content: "\ea81";
    }
    .icon-google3:before {
      content: "\ea8a";
    }
    .icon-rss2:before {
      content: "\ea9c";
    }
    .icon-github:before {
      content: "\eab0";
    }
  </style>
</head>
<body>
  <div class="totop"></div>
  
	<nav>
	    <a href="#/README">前端</a>
	    <a href="#/tools/README">工具</a>
			<a href="#/experience/README.md">历程</a>
      <a href="https://kathy_candy.gitee.io/doit/" target="_blank" title="一个基于GTD的清单管理工具">Doit</a>
	    <a href="https://kathy_candy.gitee.io/doyouho.io/" target="_blank" >意休</a>
	</nav>
  <div class="contact">
    <a href="https://github.com/doyouho/" target="_blank" title="Github-doyouho"><span class="icon-github"></span></a>
    <a href="https://gitee.com/kathy_candy/" target="_blank"  title="Gitee-kathy_candy(doyouho)"><span class="icon-google3"></span></a>
    <a href="https://codepen.io/collection/WvGQZN" target="_blank"  title="Codepen-doyouho"><span class="icon-terminal"></span></a>
    <a href="https://www.yuque.com/nibaobao-youho/fiction" target="_blank"  title="语雀-小说"><span class="icon-book"></span></a>
    <a href="https://www.yuque.com/nibaobao-youho/yixiu" target="_blank"  title="语雀-讨论/意见"><span class="icon-bubble2"></span></a>
    <!-- <span class="icon-rss2"></span> -->
    <div class="email">kathy_candy@sina.com</div>
  </div>
  
  <div class="smallnav">
    <a href="#/README" title="前端" class="item">前端</a><a href="#/tools/README" title="工具" class="item">工具</a><a href="#/experience/README" title="历程" class="item">历程</a>
  </div>
  <div class="darkbtn"><span class="icon-sun"></span></div>
  
  <div id="app"></div>
  
  <script>
    window.$docsify = {
      name: 'Youho',
			logo: 'media/logo.jpg title=Youho-QQ学习交流群417911729',
      repo: 'https://gitee.com/kathy_candy/blog/',
      notFoundPage: true,
      nameLink: './#/tools/lists',
			loadNavbar: true,
			loadSidebar: true,
			autoHeader: true,
      auto2top: true,
			noEmoji: true,
			mergeNavbar: true,
			subMaxLevel: 2,
			coverpage: true,
			onlyCover: true,
			themeColor: '#fe5e99',
			formatUpdated: '{MM}/{DD} {HH}:{mm}',
			// routerMode: 'history',
			topMargin: 20,
			formatUpdated: function(timer) {
				let date = new Date(timer)
				let time=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' +
				date.getMinutes() + ':' + date.getSeconds();
				return time;
			},
     
			plugins: [ 
				function(hook) {
          
          hook.mounted(function(){
            // 初始化并第一次加载完成数据后调用，只触发一次，没有参数。
            var totopbtn = document.getElementsByClassName('totop')[0];
            totopbtn.onclick = function(){
              window.scrollTo(0,0);
            }
            var ocontact = document.getElementsByClassName('contact')[0];
            var omain =document.getElementsByTagName('main')[0];
            var oaside = document.getElementsByClassName('sidebar')[0];
            var h1 = document.getElementsByClassName('app-name')[0];
            var div = document.getElementsByClassName('smallnav')[0];
            var btn = document.getElementsByClassName('darkbtn')[0];
            var obody = document.getElementsByTagName('body')[0];
            btn.onclick = function(){
              if(btn.classList.contains('active')){
                btn.classList.remove('active');
                obody.classList.remove('dark');
              }else{
                btn.classList.add('active');
                obody.classList.add('dark');
              }
            }
            div.style.display = 'flex';
            h1.appendChild(ocontact);
            h1.appendChild(div);
            omain.insertBefore(btn, oaside);
            var osearch = document.querySelector('.input-wrap input');
            osearch.accessKey = '/';
          });
          
          hook.doneEach(function() {
            // 每次路由切换时数据全部加载完成后调用，没有参数。
            var totopbtn = document.getElementsByClassName('totop')[0];
            var ocover = document.getElementsByClassName('cover')[0];
            if(ocover.classList.contains('show')){
              totopbtn.style.display = 'none';
            }else{
              totopbtn.style.display = 'block';
            } 
            if(document.getElementsByClassName('smallnav')){
              var osmallnav = document.getElementsByClassName('smallnav')[0];
              var oitems = osmallnav.getElementsByClassName('item');
              var databody = document.querySelector('body').getAttribute('data-page');
              
              if(/tools/.test(databody)){
                oitems[1].classList.add('active');
                oitems[0].classList.remove('active');
                oitems[2].classList.remove('active');
              }else if(/experience/.test(databody)){
                oitems[2].classList.add('active');
                oitems[0].classList.remove('active');
                oitems[1].classList.remove('active');
              }else{
                oitems[0].classList.add('active');
                oitems[1].classList.remove('active');
                oitems[2].classList.remove('active');
              }
            }
          });
          
					//  自定义组件 尾部插件
					var footer = [
						'<hr/>',
						'<footer class="footer">',
						'<span><a href="https://gitee.com/kathy_candy/blog/">^youho</a> &copy;2022.Proudly published with <a href="https://github.com/docsifyjs/docsify" target="_blank">docsify</a>( <a href="https://docsify.js.org/" target="_blank">documents</a> ).</span> ',
						'<span>See more about me at <a href="https://kathy_candy.gitee.io/doyouho.io/" target="_blank">^意休</a>, if you have any suggetions, please tell me at <a href="https://www.yuque.com/nibaobao-youho/yixiu" target="_blank">^讨论</a>. ( By the way, <a href="https://kathy_candy.gitee.io/doit/" target="_blank">^Doit</a>, a list tool, may help you take a good use of your time )</span>',
						'</footer>'
					].join('');
		
					hook.afterEach(function(html) {
             // 解析成 html 后调用。还支持异步。
						return html + footer;
					});
      
				}
			],
			
			search: {
				// 搜索插件参数
				maxAge: 400000, // 过期时间，单位毫秒，默认一天
				paths: 'auto', // [] or 'auto'
				placeholder: '搜索（快捷键 Alt + /）',
				noData: '!糟糕，没找到',
				// 搜索标题的最大层级, 1 - 6
				depth: 4,
				hideOtherSidebarContent: false, // 是否隐藏其他侧边栏内容
	
				// 避免搜索索引冲突
				// 同一域下的多个网站之间
				namespace: 'website-1'
			},
			count:{
				// 字数计算插件参数
				countable:true,
				fontsize:'0.9em',
				color:'rgb(120,120,120)',
				language:'chinese'
			}
    }
 
  
  </script>
  
  
  <!-- Docsify v4 -->
  <!-- <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
	<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
  <!-- 下面是PWA脱机模式的注册，配合sw.js实现， 仅适用于某些现代浏览器 -->
 <script>
    if (typeof navigator.serviceWorker !== 'undefined') {
      navigator.serviceWorker.register('sw.js')
    }
  </script>
</body>
</html>
